<template>
  <div>
    <div ref="pie" class="view">
    </div>
    <!-- 审核意见 -->
    <el-dialog title="各单位运维资金排名" :visible.sync="show" width="50%" @cancel="show = false" :destroy-on-close="true"
      top="20px">
      <el-table :data="unitAll" ref="tableData" border height="500">
        <el-table-column prop="NAME" label="运维类型"> </el-table-column>
        <el-table-column prop="objCount" label="申请运维项目数量" sortable>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    unitNum: {
      type: Array,
      default: () => {
        return []
      }
    },
    unitAll: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      show: false
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    init () {
      let pie = this.$echarts.init(this.$refs.pie);
      pie.setOption({
        title: {
          text: '各单位运维项目数量（前5名）',
          left: '10',
          top: '5',
          // 点击事件
          triggerEvent: true,
        },
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} 万元 ({d}%)'
        },
        legend: {
          show: false,
          orient: 'vertical',
          left: 10,
          data: this.unitNum
        },
        series: [
          {
            top: 15,
            name: '运维资金',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              align: 'left',
              normal: {
                formatter (v) {
                  let text = v.name
                  // Math.round(v.percent)+'%' + '' +
                  if (text.length <= 8) {
                    return text
                  } else if (text.length > 8 && text.length <= 16) {
                    return text = `${text.slice(0, 8)}\n${text.slice(8)}`
                  } else if (text.length > 16 && text.length <= 24) {
                    return text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16)}`
                  } else if (text.length > 24 && text.length <= 32) {
                    return text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16, 24)}\n${text.slice(24)}`
                  } else if (text.length > 32) {
                    return text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16, 24)}\n${text.slice(24, 32)}\n${text.slice(24)}`
                  }
                },
                textStyle: {
                  fontSize: 12
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: this.unitNum
          }
        ]
      })

      pie.on('click', params => {
        this.show = true
      }
      )
    },
    modal () {

    }
  },
  computed: {

  },
}
</script>
<style lang='scss' scoped>
.view {
  width: 100%;
  height: 30rem;
}
</style>
